<template>

	<view>
		<u-modal v-model="confirm_show" :content="content" :mask-close-able="true" show-cancel-button='true' @confirm='handmodify'></u-modal>
		<u-toast ref="uToast" />
		<input v-model="user.realName" type="text" placeholder='姓名' class="name-input" />
		<input height="50" v-model="user.sex" type="text" @click="s_show = true" placeholder='性别' class="sex-input" disabled='true' />

		<view>
			<view class="birth-input">

				<view class="uni-list">
					<view class="uni-list-cell">

						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input" style="margin-top: 17rpx;">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<u-action-sheet :list="list" v-model="s_show" @click="actionSheetCallback"></u-action-sheet>
			<u-select v-model="a_show" mode="mutil-column-auto" :list="a_list" @confirm="bindPickerChange"></u-select>
			<view class="" @click="a_show=true">
				<view class="area-input">
					<view style="margin-top: 17rpx;">{{address}}</view>

				</view>

			</view>
			<u-button size="medium" @click="confirm_show=true" :custom-style='btn' v-if='btn_show'>确认修改</u-button>
			<u-button size="medium" :custom-style='btn_two' v-if="btn_two_show">无法修改</u-button>

			<view class="wenzi">
				<text>为了防止部分用户通过更改名字，生日等来查找与其真实信息不匹配的用户，避免带来不必要的打扰，所以个人信息，一年只能修改一次，请认真谨慎填写信息</text>
			</view>

		</view>
	</view>
</template>

<script>
	import
	provinces from '../../uview-ui/libs/util/province.js'
	import citys from '../../uview-ui/libs/util/city.js';
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				confirm_show: false,
				content: '是否要修改个人信息',
				btn_show: false,
				btn_two_show: false,
				a_show: false,
				a_list: [],
				title: 'picker',
				date: currentDate,
				btn_two: {
					'background': '#808080',
					'margin-left': '32.5%',
					'margin-top': '30rpx'
				},
				btn: {

					'background': '#98C1FF',
					'margin-left': '32.5%',
					'margin-top': '30rpx'
				},
				params: {

					city: true,
					province: true,
				},
				list: [{
						text: '男'
					},
					{
						text: '女'
					},

				],
				user: {
					birthTime: '',
					realName: '',
				},
				address: '',
				b_show: false,
				s_show: false,
				a_show: false,

				form: {},

			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShareAppMessage(option) {
			return {
				title: '快来康康同样的TA',
				desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
				path: '/page/modification/index', // ?后面的参数会在转发页面打开时传入onLoad方法
				
				templateId: 'xmqi3vul2929i5gn3b',
				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		onShow() {

			this.getinfo()
		},
		created() {
			this.$u.get('/system/user/profile/isok', ).then(res => {
				if (res.data == true) {
					this.btn_show = true
					this.btn_two_show = false
				} else {
					this.btn_show = false
					this.btn_two_show = true
				}
			})
			this.a_list = provinces
			if (this.a_list[0].label == '全部') {
				this.a_list.shift()
			}
			for (let i = 0; i < citys.length; i++) {
				this.a_list[i].children = [],
					this.a_list[i].children = citys[i]

			}
		},
		mounted() {




		},
		methods: {
			//获取选择的地区数据
			bindPickerChange(e) {
				this.address = e[0].label + e[1].label
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//获取选择日期
			bindDateChange(e) {
				this.date = e.target.value
			},
			getinfo() {
				//获取个人信息
				this.$u.get('/system/user/profile', {}, ).then(res => {
					this.user = res.data
					this.date = this.user.birthTime

					this.address = this.user.area


					if (this.user.sex == 0) {
						this.user.sex = '男'
					} else {
						this.user.sex = '女'
					}
				})
			},
			//修改个人信息
			handmodify() {
				this.$u.get('/system/user/profile/isok', ).then(res => {

					this.user.birthTime = this.date
					this.user.area = this.address
					var user = {
						sex: this.user.sex,
						birthTime: this.user.birthTime,
						realName: this.user.realName,
						area: this.user.area,
						isUpdate:1,

					}
					if (res.data == true) {
						if (this.user.sex == '男') {
							user.sex = 0
						} else {
							user.sex = 1
						}
						this.$u.post('/system/user/profile', user).then(res => {
							this.getinfo()
							this.$refs.uToast.show({
								title: '修改成功',
								type: 'success',
							})

						})
					} else {
						this.$refs.uToast.show({
							title: '一年只能修改一次!',
							type: 'success',
						})
					}

				})
			},

			// 获取选择的性别数据
			actionSheetCallback(index) {
				this.user.sex = this.list[index].text;
			},
		}
	}
</script>

<style lang="scss">
	.name-input {
		margin: auto;
		padding: 0 0 0 20rpx;
		width: 220px;
		height: 35px;
		background: #FFFFFF;
		border: 0.5px solid #707070;
		border-radius: 5px;
		opacity: 0.8;
		margin-bottom: 20rpx;
		margin-top: 130rpx;

	}

	.sex-input {
		margin: auto;
		padding: 0 0 0 20rpx;
		width: 220px;
		height: 36px;
		background: #FFFFFF;
		border: 0.5px solid #707070;
		opacity: 0.8;
		margin-bottom: 20rpx;
		border-radius: 5px;

	}

	.birth-input {
		margin: auto;
		padding: 0 0 0 20rpx;
		width: 230px;
		height: 35px;
		background: #FFFFFF;
		border: 0.5px solid #707070;
		border-radius: 5px;
		margin-bottom: 20rpx;
		opacity: 0.8;
	}

	.area-input {
		margin: auto;
		padding: 0 0 0 20rpx;
		width: 230px;
		height: 35px;
		background: #FFFFFF;
		border: 0.5px solid #707070;
		border-radius: 5px;
		margin-bottom: 20rpx;
		opacity: 0.8;
		margin-bottom: 20rpx;
	}

	.wenzi {
		margin: auto;
		margin-top: 120rpx;
		width: 660rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 52rpx;
		color: #919191;
		-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
		text-stroke: 1 rgba(0, 0, 0, 0);
		opacity: 1;
	}
</style>
